<link rel="stylesheet" type="text/css" href="<?php echo css_url().'general_form.css'?>">
<link rel="stylesheet" type="text/css" href="<?php echo css_url().'table/list_show.css'?>">
    <form class='fill-in-form no-margin' method='post' id="avatar-upload" action="<?php echo site_url().'/user_group3/account/upload_avatar'?>" 
                               enctype="multipart/form-data" target="upload-target" onsubmit='StartUpload();'>
        <ol>
            <div class="head">Profile Picture: </div>
            <li>
            <div class="upload-file" style="cursor:pointer">
                <image id="avatar-image" src="<?php echo $UserInfo['AvatarLink']?>" class="avatar"/>
                <span>Click here to upload your image</span>
            </div>
            <input id="upload-file" class="hidden" type="file" name="avatar" />
            </li>
        </ol>
        <div class="hr" > </div>
    </form>
    
    <iframe id="upload-target" name="upload-target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
    
    <form id="main-form" action="<?php echo site_url().'/user_group3/account/edit_user_account'?>" method="post">
        <ol>
            <input id='file_url' name='AvatarLink' type='text' value="<?php echo user_avatar_link();?>" style='display:none'/>
            <!-- User Email -->
            <li>
                <div class="head">Email: <?php echo $UserInfo['UserEmail'] ?></div>
            </li>
            <!-- Fullname -->
            <li>
                <div class="head" >Full Name:</div>
                <div class="tab">
                    <input id="UserFullname" class="text" type="text" name="UserFullname" value="<?php echo $UserInfo['UserFullname'] ?>"/>  
                    <span class='error' id='UserFullname-error'></span>
                </div>
            </li>
            <!-- Change Password -->
            <li>
                <div class = "head">Change Password: <span id="password-error" class="error"></span> </div> 
                <div class="tab margin-bottom">
                    <input id="old-password" class="text" type="password" name="OldPassword" placeholder="Old Password"/>                  
                    <input id="new-password" class="text" type="password" name="NewPassword" placeholder="New Password"/>
                </div>
            </li>
            
            <!--Age Field-->
            <li>
                <div class="head">Age: </div>
                <div class="tab">
                    <div class="styled-select" >
                        <select id="Age" name="Age" tabindex="0">
                            <option value="<?php echo $UserInfo['Age']?>"><?php echo $UserInfo['Age']?></option>
                            <?php for($i = 18; $i <= 60; $i++){ ?>
                                <option value="<?php echo $i?>"><?php echo $i ?></option>
                            <?php } ?>
                        </select>
                    </div>
                <div id="Age-error" class="error" ></div>
                </div>
            </li>
            <!-- Sex field --->
            <li>
                <div class="head">Sex: </div>
                <div class="tab">
                    <div class="styled-select" >
                        <select id="Sex" name="Sex" tabindex="0">
                            <option value="<?php echo $UserInfo['Sex'];?>"><?php echo $UserInfo['Sex'];?></option>
                            <option value="Unknown">Unknown</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                </div>
                <div id="Sex-error" class="error" ></div>
            </li>
            <!-- Married Status Field -->
            <li>
                <div class="head">Married Status: </div>
                <div class="tab">
                    <div class="styled-select" >
                        <select id="MarriedStatus" name="MarriedStatus" tabindex="0">
                            <option value="<?php echo $UserInfo['MarriedStatus'];?>"><?php echo $UserInfo['MarriedStatus'];?></option>
                            <option value="Single">Single</option>
                            <option value="Married">Married</option>
                        </select>
                    </div>
                </div>
                <div id="MarriedStatus-error" class="error" ></div>
            </li>
            <li class="margin-top-end">
                <div class="tab">
                    <div id="main-form-submit-btn" class="submit-bt">Save Changes</div>
                </div>
            </li>
            <div id="form-status" class="head"><span></span></div>
        </ol>
    </form>
    
    <?php include js_url(true).'validate_things.php'?>
    <script>
        /* -------------------Uploading avatar ---------------*/
            function StopUpload(Result){
                    if(Result)
                    {
                        var i = new Date().getTime();
                        $("#avatar-image").attr("src","<?php echo image_url()?>"+Result+"?random="+i);
                        $("div.upload-file span").text("Uploaded");
                        $("input#file_url").val("<?php echo image_url()?>"+Result);
                    }
                   else{
                       $("div.upload-file span").text("The uploading has been failed. Please try again");
                   }
                }

            function StartUpload(){
                $("div.upload-file span").text("Uploading....");
            }
            /* Upload file btn click */
            $("div.upload-file").on('click',function(){
                $("input#upload-file").click();
            });

            $("input#upload-file").on('change',function(){
                if(!checkFileName($(this).val()))
                {
                    $("div.upload-file span").text("Wrong type of file. Only JPG, JPEG, PNG and BMP is allowed");
                    return;
                }
                $("form#avatar-upload").submit();
            });
        /*--------------End of uploading avatar----------------------*/
        
        /*-----Validate name ----------*/
        var validate_name = function(){
                var isPass = true;
                value = $("#UserFullname").val();
                if(value.length == 0){
                    $("#UserFullname-error").text("Name is required");
                    $("#UserFullname").attr("class","text-error");
                    isPass = false;
                }
                else{
                    $("#UserFullname-error").text("");
                    $("#UserFullname").attr("class","text");
                }
                return isPass;
            }
        /*------ Validate Age ------*/
        var validate_age = function(){
            var isPass = true;
            value = $("#Age").val();
            if(value.length == 0){
                $("#Age-error").text("Age is required").show();
                $("#Age").parent().attr("class","styled-select border-error");
                isPass = false;
            }else{
                $("#Age-error").hide();
                $("#Age").parent().attr("class","styled-select");
            }
            return isPass;
        }           
        $("#Age").on("change",validate_age);
        /*------ End of Validate Name ------*/

        /*------ Validate sex ------*/
        var validate_sex = function(){
            var isPass = true;
            value = $("#Sex").val();
            if(value.length == 0){
                $("#Sex-error").text("Sex is required").show();
                $("#Sex").parent().attr("class","styled-select border-error");
                isPass = false;
            }else{
                $("#Sex-error").hide();
                $("#Sex").parent().attr("class","styled-select");
            }
            return isPass;
        }           
        $("#Sex").on("change",validate_sex);
        /*------ End of Validate Sex ------*/

        /*------ Validate MarriedStatus ------*/
        var validate_marriedStatus = function(){
            var isPass = true;
            value = $("#MarriedStatus").val();
            if(value.length == 0){
                $("#MarriedStatus-error").text("MarriedStatus is required").show();
                $("#MarriedStatus").parent().attr("class","styled-select border-error");
                isPass = false;
            }else{
                $("#MarriedStatus-error").hide();
                $("#MarriedStatus").parent().attr("class","styled-select");
            }
            return isPass;
        }           
        $("#MarriedStatus").on("change",validate_marriedStatus);
        /*------ End of Validate MarriedStatus ------*/
        
        /* ----- Validate password ---*/     
        var validate_password = function(){
            oldPass = $("#old-password").val();
            oldPass = md5(oldPass).toString().trim();
            newPass = $("#new-password").val();
            Pass = "<?php echo $UserInfo['UserPassword']?>";
            havingOldPass =false;
            if(oldPass != Pass && oldPass.length > 0){
                $("#old-password").attr("class","text-error");
                $("#password-error").text("Your old password is incorrect.");           
                return false;
            }
            else if(oldPass.length > 0){
                havingOldPass = true;
                $("#old-password").attr("class","text");
                $("#password-error").text("");
            }
            if (IsPasswordValid(newPass) == false && (newPass.length > 0 || havingOldPass)){
                $("#new-password").attr("class","text-error");
                $("#password-error").text("Your new password must be: 6-20 characters, 1 upper, 1 lower, 1 digit");
                return false;
            }
            else{
                $("#new-password").attr("class","text");
                $("#password-error").text("");             
            }
            return true;
        }
        /* ----- End of validate password ---*/
        
        $("#main-form-submit-btn").on('click',function(){
            isPass = true;
            if(!validate_name()) isPass = false;
            if(!validate_password()) isPass = false;
            if(isPass)
                $("#main-form").submit();
        });
        
    
</script>